<template>
	<!-- 下一步实现可修正的自动面包屑导航 () -->
	<div class="m-b-20  l-h-15 breadcrumb">
		<div class="fl betterline">
			<bread-path :levelList="levelList"></bread-path>
		</div>

		<scroll-pane class='tags-view-container'>
			<router-link class="tags-view-item" :class="isActive(tag)?'active':''" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
				{{tag.name}}
				<span class='el-icon-close' @click='closeViewTags(tag,$event)'></span>
			</router-link>
		</scroll-pane>
	</div>
</template>

<script>
	import ScrollPane from 'components/ScrollPane'
	import breadPath from './bread-path.vue'
	export default {
		components: {
			ScrollPane,
			breadPath
		},
		data() {
			return {
				tempRoute: '',
				levelList: ''
			}
		},
		computed: {
			visitedViews() {
				return this.$store.state.app.visitedViews
			}
		},
		mounted() {
			this.$watch('$route', {
				deep: true,
				handler: function() {
					console.log('this.$route', this.$route)
					if(this.$route.name !== 'refresh') {
						this.levelList = this.$route.matched.filter(item => item.name)
					}
					console.log('this.levelList', this.levelList)

				}
			})
			this.addViewTags()
		},
		methods: {
			closeViewTags(view, $event) {
				this.$store.dispatch('delVisitedViews', view).then(views => {
					if(this.isActive(view)) {
						const latestView = views.slice(-1)[0]
						if(latestView) {
							this.$router.push(latestView.path)
						} else {
							this.$router.push('/')
						}
					}
				})
				$event.preventDefault()
			},
			generateRoute() {
				if(this.$route.name === 'refresh') {
					return false
				} else {
					this.tempRoute = this.$route
				}
				if(this.$route.name) {
					return this.$route
				}
				return false
			},
			addViewTags() {
				const route = this.generateRoute()
				if(!route) {
					return false
				}
				this.$store.dispatch('addVisitedViews', route)
			},
			isActive(route) {
				return(
					route.path === this.tempRoute.path || route.name === this.tempRoute.name
				)
			}
		},
		watch: {
			$route() {
				this.addViewTags()
			}
		},
		created() {
			this.levelList = this.$route.matched.filter(item => item.name)
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.close-all-tag-con {
		position: absolute;
		right: 0;
		top: 0;
		box-sizing: border-box;
		padding-top: 8px;
		text-align: center;
		width: 110px;
		height: 100%;
		background: white;
		box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
		z-index: 10;
	}
	
	.el-breadcrumb {
		margin-right: 20px;
	}
	
	.betterline {
		padding-left: 15px;
		background: url(../../assets/images/location.png) no-repeat left 6px;
	}
	
	.tags-view-container {
		// background: #fff;
		height: 34px;
		// border-bottom: 1px solid #d8dce5;
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
		.tags-view-item {
			display: inline-block;
			position: relative;
			height: 30px;
			line-height: 33px;
			border: 1px dashed #b1b1b1;
			color: #b1b1b1;
			padding: 0 8px;
			font-size: 14px;
			margin-left: 5px;
			border-radius: 5px;
			&:first-of-type {
				margin-left: 15px;
			}
			&.active {
				background-color: #20a0ff!important;
				color: #fff;
				border-color: #20a0ff!important;
				&::before {
					content: '';
					background: #fff;
					display: inline-block;
					width: 8px;
					height: 8px;
					border-radius: 50%;
					position: relative;
					top: -1px;
					margin-right: 2px;
				}
			}
		}
	}
</style>

<style rel="stylesheet/scss" lang="scss">
	.m-b-20 {
		margin-bottom: 20px !important;
		overflow: hidden;
		line-height: 35px;
	}
	
	.tags-view-container {
		.tags-view-item {
			.el-icon-close {
				position: relative;
				top: 2px;
				font-size: 16px;
				width: 16px;
				height: 16px;
				vertical-align: 2px;
				border-radius: 50%;
				text-align: center;
				transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
				transform-origin: 100% 50%;
				&:hover {
					background-color: #b4bccc;
					color: #fff;
				}
			}
		}
	}
</style>